<template>
	<!-- 新人礼弹窗 -->
	<view class="coupon_modal" @touchmove.stop.prevent="moveStop" v-if="couponModal">
		<view class="mask"></view>
		<view class="_container" :style="{ 'background-image': `url(${urlDomain}crmebimage/presets/coupon_modal_bg.png)` }">
			<view class="_tit">新人专属大礼包</view>
			<view class="_look">优惠券将发放至个人账户，可在“我的优惠券”查看</view>
			<scroll-view :scroll-top="0" scroll-y="true" class="_box">
				<view class="_item acea-row row-middle" v-for="item in couponList" :key="item.id" :style="{ 'background-image': `url(${urlDomain}crmebimage/presets/coupon_item_bg.png)` }">
					<view class="_price_box">
						<view class="_price">¥{{ item.money }}</view>
						<view class="_man">满{{ item.minPrice }}可用</view>
					</view>
					<view class="flex-1 _desc">
						<view v-if="item.category === 3" class="_text line1">全平台通用</view>
						<view v-else class="_text line1">仅限指定{{ item.category | couponTypeFilter }}可用</view>
						<view v-if="item.isFixedTime" class="_end line1">
							{{ $util.getTime(item.useStartTime) + ' ~ ' + $util.getTime(item.useEndTime) + '可用' }}
						</view>
						<view v-else class="_end line1">{{ '领取后' + item.day + '天内可用' }}</view>
					</view>
				</view>
			</scroll-view>
			<view class="_btn" @click="close()" :style="{ 'background-image': `url(${urlDomain}crmebimage/presets/coupon_modal_btn.png)` }"></view>
			<span class="guanbi iconfont icon-cha2" @click="close()"></span>
		</view>
	</view>
</template>
<script>
export default {
	name: 'couponDialog',
	props: {
		//图片域名地址
		urlDomain: {
			type: String,
			default: ''
		},
		//弹窗是否弹起
		couponModal: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		//优惠券列表
		couponList() {
			let list = this.$Cache.get('newGift') ? JSON.parse(this.$Cache.get('newGift')) : [];
			return list;
		}
	},
	methods: {
		close() {
			this.$emit('on-close');
		},
		getTime(time) {
			this.$util.getTime(time);
		}
	}
};
</script>
<style lang="scss" scoped>
.coupon_modal {
	._container {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 630rpx;
		height: 844rpx;
		background-size: cover;
		z-index: 33;

		._tit {
			text-align: center;
			height: 42rpx;
			font-size: 42rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #ffe9be;
			line-height: 42rpx;
			text-shadow: 0px 2rpx 2rpx rgba(0, 0, 0, 0.2);
			margin-top: 226rpx;
		}

		._look {
			text-align: center;
			font-size: 22rpx;
			color: #fff;
			margin: 20rpx auto 28rpx;
		}

		._box {
			width: 540rpx;
			height: 370rpx;
			margin: auto;
		}

		._item {
			width: 100%;
			height: 140rpx;
			border-radius: 14rpx;
			background-size: cover;
			padding: 10rpx 0;

			._price_box {
				width: 200rpx;
				padding: 0 20rpx;
				text-align: center;
				border-right: 1px dashed #e6e6e6;

				._price {
					font-size: 34rpx;
					color: #e93323;
					font-weight: 600;
				}

				._man {
					font-size: 22rpx;
					color: #666;
					margin-top: 10rpx;
				}
			}

			._desc {
				padding: 0 30rpx;

				._text {
					width: 280rpx;
					font-size: 32rpx;
					color: #282828;
					font-weight: 600;
				}

				._end {
					width: 280rpx;
					margin-top: 20rpx;
					font-size: 22rpx;
					color: #999;
				}
			}

			~ ._item {
				margin-top: 20rpx;
			}
		}

		._btn {
			width: 320rpx;
			height: 76rpx;
			background-size: cover;
			margin: 26rpx auto 0;
		}

		.guanbi {
			font-size: 50rpx;
			color: #fff;
			font-weight: bold;
			position: absolute;
			bottom: -70rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
</style>
